<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>地图展示</title>
	<script src="./pdf/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/lodash.js"></script>
	
</head>
<body>
	<div class="savebtn">
		<div class="box">
			<a id="saveMarker">确定</a>
		</div>
	</div>
	<div id="container" class="map"></div>
	<div class="search">
		<div class="search-bg om-btn-color">
			<input type="text" class="keyword" />
			<a class="search-btn" id="search-key">搜索</a>
		</div>
	</div>
	<div id="searchlist" class="search-list"></div>
	<div id="placeLng" style="display: none;"></div>
	<div id="placeLat" style="display: none;"></div>
	<div id="placeName" style="display: none;"></div>
	<div id="pageNum" style="display: none;">1</div>
	<div id="pageCount" style="display: none;">1</div>
	<div id="clickItem" style="display: none;"></div>
	<div id="signLng" style="display: none;"></div>
	<div id="signLat" style="display: none;"></div>
</body>
<style>
	html,body{
		margin: 0;
		padding: 0;
	}
	.savebtn{
		position: fixed;
		font-size: 14px;
		z-index: 99;
		width: 100%;
		background: #FFF;
		height: 50px;
		top: 0;
	}
	.savebtn .box{
		float: right;
		width: 68px;
		margin-right: 15px;
	}
	.savebtn .box a{
		display: block;
		width: 68px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		margin: 12px 0;
	}
	.map{
		width: 100%;
		height:250px;
		position: fixed;
		top: 50px;
	}
	.search{
		position: fixed;
		top: 300px;
		width: 100%;
		overflow: hidden;
	}
	.search-bg{
		position: relative;
		z-index: 10000;
		color: #ffffff;
		border: none;
		display: flex;
		flex-direction: row;
		padding: 8px;
	}
	.keyword{
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		flex: 1;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		height: 35px;
		padding: 5px 8px 5px 0px;
		border-width: 1px;
		border-style: solid;
		border-color: #c8c7cc;
		border-radius: 5px;
		background-color: rgb(248, 248, 248);
	}
	.search-btn{
		padding-left: 10px;
		line-height: 35px;
		font-size: 15px;
		margin: 0 10px;
	}
	.search-list{
		overflow: auto;
		margin-top: 351px;
	}
	.search-item{
		padding: 10px 15px;
		border-bottom: 1px solid #c8c7cc;
		overflow: hidden;
	}
	.search-item .name{
		color: #3b4144;
		height: 18px;
		line-height: 18px;
		width: 100%;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.search-item .address{
		color: #999999;
		height: 16px;
		line-height: 16px;
		width: 100%;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.no-data{
		line-height: 44px;
		padding: 0 15px;
	}
</style>
<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'8dbc9071102afccd853822e3170f6d4f',
        }
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=92bfa8b848fb3fbaf2b4d5fa40447225"></script>
 <!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
<script type="text/javascript" src="./js/uni.webview.1.5.2.js"></script>
<script>
	var local = window.location.href;
	var lng = local.substring(local.indexOf('?lng=')+5,local.indexOf('&lat='));
	var lat = local.substring(local.indexOf('&lat=')+5,local.indexOf('&signLng='));
	var placeName = decodeURI(local.substring(local.indexOf('&placeName=')+11,local.indexOf('&distance=')));
	var slng = local.substring(local.indexOf('&signLng=')+9,local.indexOf('&signLat='));
	var slat = local.substring(local.indexOf('&signLat=')+9,local.indexOf('&placeName='));
	var distance = parseInt(local.substring(local.indexOf('&distance=')+10,local.length));
	var pageSize = 50;

	if(slng && slat){
		$("#signLng").html(parseFloat(slng))
		$("#signLat").html(parseFloat(slat))
	}

	if(lng && lat){
		$("#placeLng").html(parseFloat(lng))
		$("#placeLat").html(parseFloat(lat))
		$("#placeName").html(placeName)
		var cpoint = [$("#placeLng").html(), $("#placeLat").html()]; //中心点坐标
		// window.onLoad  = function(){
		    var map = new AMap.Map('container',{
				zoom: 16, //设置地图的缩放级别
				center: cpoint
			});

			var marker = new AMap.Marker({
			    position: new AMap.LngLat($("#placeLng").html(), $("#placeLat").html()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
			    title: $("#placeName").html()
			});
			map.add(marker);
			
			AMap.service(["AMap.PlaceSearch"], function() {
			    //构造地点查询类
			    var placeSearch = new AMap.PlaceSearch({ 
			        pageSize: pageSize, // 单页显示结果条数
			        pageIndex: $("#pageNum").html(), // 页码
			        citylimit: false,  //是否强制限制在设置的城市内搜索
			    });
			        
			    placeSearch.searchNearBy('', cpoint, distance, function(status, result) {
					if(status == 'complete'){
						var searchList = result.poiList.pois
						for(var i=0; i<searchList.length; i++){
							var item = JSON.stringify(searchList[i]) 
							var str = "<div class='search-item' onclick='addMarker("+item+")'><div class='name'>"+searchList[i].name+"</div><div class='address'>"+searchList[i].address+"</div></div>"
							$("#searchlist").append(str)
						}
						$("#pageCount").html(result.poiList.count)
					}
					if(status == 'no_data'){
						$("#searchlist").html("<div class='no-data'>你搜索的的地点不存在或者超出了微调允许的范围</div>")
					}
					if(status == 'error'){
						//错误信息
					}
			    });
			});
		// }
	}else{
		var map = new AMap.Map('container',{
			zoom: 16, //设置地图的缩放级别
			zoomEnable: false,
			dragEnable: false,
			touchZoom: false,
		});
		
		AMap.plugin('AMap.Geolocation', function() {
		  var geolocation = new AMap.Geolocation({
		    // 是否使用高精度定位，默认：true
		    enableHighAccuracy: true,
		    // 设置定位超时时间，默认：无穷大
		    timeout: 10000,
		  })
		
		  geolocation.getCurrentPosition()
		  AMap.event.addListener(geolocation, 'complete', onComplete)
		  AMap.event.addListener(geolocation, 'error', onError)
		
		  function onComplete (data) {
		    // data是具体的定位信息
			$("#placeLng").html(data.position.lng)
			$("#placeLat").html(data.position.lat)
			$("#placeName").html(data.formattedAddress)
			var cpoint = [data.position.lng, data.position.lat]; //中心点坐标
			map.panTo(cpoint);
			
			var marker = new AMap.Marker({
			    position: new AMap.LngLat(data.position.lng, data.position.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
			    title: data.formattedAddress
			});
			map.add(marker);
			
			AMap.service(["AMap.PlaceSearch"], function() {
			    //构造地点查询类
			    var placeSearch = new AMap.PlaceSearch({ 
			        pageSize: pageSize, // 单页显示结果条数
			        pageIndex: $("#pageNum").html(), // 页码
			        citylimit: false,  //是否强制限制在设置的城市内搜索
			    });
			        
			        
			    placeSearch.searchNearBy('', cpoint, distance, function(status, result) {
					if(status == 'complete'){
						var searchList = result.poiList.pois
						for(var i=0; i<searchList.length; i++){
							var item = JSON.stringify(searchList[i]) 
							var str = "<div class='search-item' onclick='addMarker("+item+")'><div class='name'>"+searchList[i].name+"</div><div class='address'>"+searchList[i].address+"</div></div>"
							$("#searchlist").append(str)
						}
						$("#pageCount").html(result.poiList.count)
					}
					if(status == 'no_data'){
						$("#searchlist").html("<div class='no-data'>你搜索的的地点不存在或者超出了微调允许的范围</div>")
					}
					if(status == 'error'){
						//错误信息
					}
			    });
			});
		  }
		
		  function onError (data) {
		    // 定位出错
		  }
		})
	}
	
	function addMarker(item){
		var cpoint = [$("#placeLng").html(), $("#placeLat").html()]; //中心点坐标
		var map = new AMap.Map('container',{
			zoom: 16, //设置地图的缩放级别
			center: cpoint
		});
		
		var marker = new AMap.Marker({
		    position: new AMap.LngLat($("#placeLng").html(), $("#placeLat").html()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
		    title: $("#placeName").html()
		});
		map.remove(marker);
		
		$("#placeLng").html(item.location.lng)
		$("#placeLat").html(item.location.lat)
		$("#placeName").html(item.name)
		
		var marker = new AMap.Marker({
		    position: new AMap.LngLat($("#placeLng").html(), $("#placeLat").html()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
		    title: $("#placeName").html()
		});
		map.add(marker);
		map.panTo([$("#placeLng").html(), $("#placeLat").html()]);
	}
	
	$("#search-key").on('click', _.debounce(getDataList, 300, {
	    'leading': false,
	    'trailing': true
	}));
	
	function getDataList(){
		var keyword = $('.keyword').val()
		$("#searchlist").html('')
		$("#pageNum").html(1)
		var cpoint = [$("#placeLng").html(), $("#placeLat").html()]; //中心点坐标
		// window.onLoad  = function(){
		    var map = new AMap.Map('container',{
				zoom: 16, //设置地图的缩放级别
				center: cpoint
			});
		
			var marker = new AMap.Marker({
			    position: new AMap.LngLat($("#placeLng").html(), $("#placeLat").html()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
			    title: $("#placeName").html()
			});
			map.add(marker);
			
			AMap.service(["AMap.PlaceSearch"], function() {
			    //构造地点查询类
			    var placeSearch = new AMap.PlaceSearch({ 
			        pageSize: pageSize, // 单页显示结果条数
			        pageIndex: $("#pageNum").html(), // 页码
			        citylimit: false,  //是否强制限制在设置的城市内搜索
			    });
			        
			    placeSearch.searchNearBy(keyword, cpoint, distance, function(status, result) {
					if(status == 'complete'){
						var searchList = result.poiList.pois
						for(var i=0; i<searchList.length; i++){
							var item = JSON.stringify(searchList[i]) 
							var str = "<div class='search-item' onclick='addMarker("+item+")'><div class='name'>"+searchList[i].name+"</div><div class='address'>"+searchList[i].address+"</div></div>"
							$("#searchlist").append(str)
						}
						$("#pageCount").html(result.poiList.count)
					}
					if(status == 'no_data'){
						$("#searchlist").html("<div class='no-data'>你搜索的的地点不存在或者超出了微调允许的范围</div>")
					}
					if(status == 'error'){
						//错误信息
					}
			    });
			});
		// }
	}
	
	document.getElementById('saveMarker').addEventListener('click', function() {
		var signLng = $("#signLng").html()
		var signLat = $("#signLat").html()
		var distance = ''
		if(signLng && signLat){
			var p1 = [signLng, signLat];
			var p2 = [$("#placeLng").html(), $("#placeLat").html()];
			var map = new AMap.Map('container',{
				zoom: 16, //设置地图的缩放级别
				center: p2
			});
			distance = Math.round(AMap.GeometryUtil.distance(p1, p2));
		}
		
		var markerDesc = {
			lng: $("#placeLng").html(),
			lat: $("#placeLat").html(),
			name: $("#placeName").html(),
			distance: distance
		}
		//#ifndef H5
		uni.postMessage({
	        data: markerDesc
	    });
		//#endif
		
		//#ifdef H5
		sessionStorage.setItem("visitSignh5Key", JSON.stringify(markerDesc));
		uni.navigateBack()
		//#endif
	    
	});
</script>
</html>